<template>
	<view class="tabbar">
		<template v-for="(item, index) in list" :key="index">
			<template v-if="index === 0">
				<!-- <view v-if="token" class="tabbar-item" @tap="navigate(index, item)">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{item.text}}</view>
				</view> 
				<view v-else class="tabbar-item">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{item.text}}</view>
					<button @tap="login"></button>
				</view> -->
				<view class="tabbar-item" @tap="navigate(index, item)">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{ item.text }}</view>
				</view>
			</template>
			<template v-else-if="index === 1">
				<view v-if="token" class="tabbar-item">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{ item.text }}</view>
					<button open-type="share"></button>
				</view>
				<view v-else class="tabbar-item" @tap="navigate(index, item)">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{ item.text }}</view>
				</view>
			</template>
			<template v-else-if="index === 2">				
				<view v-if="display" class="tabbar-item" style="flex: 0.6;" @tap="navigate(index, item)">
					<image :src="item.iconPath" mode="" class="iimg"></image>
					<view class="text store-text">{{ item.text }}</view>
				</view>
			</template>
			<template v-else>
				<view class="tabbar-item" @tap="navigate(index, item)">
					<image :src="item.iconPath" mode="" class="icon"></image>
					<view class="text">{{ item.text }}</view>
					<button v-if="index === 1" open-type="share"></button>
				</view>
			</template>
		</template>

		<!-- <view class="tabbar-item">
			<image src="https://ywtmp.hnwytkj.comom/static/images/menu/icon2-1.png" mode="" class="icon"></image>
			<view class="text">分享</view>
		</view>
		<view class="tabbar-item">
			<image src="https://ywtmp.hnwytkj.comom/static/images/menu/icon3-1.png" mode="" class="icon"></image>
			<view class="text">拨号</view>
		</view>
		<view class="tabbar-item">
			<image src="https://ywtmp.hnwytkj.comom/static/images/menu/icon4-1.png" mode="" class="icon"></image>
			<view class="text">导航</view>
		</view>
		<view class="tabbar-item">
			<image src="https://ywtmp.hnwytkj.comom/static/images/menu/icon5-1.png" mode="" class="icon"></image>
			<view class="text">官网</view>
		</view> -->
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
	props: {
		token: {
			type: String,
			default() {
				return ''
			}
		},
		display: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default() {
				return [
					{
						pagePath: '/pages/index/index',
						text: '保存',
						iconPath: '/static/images/menu/icon1-1.png',
						selectedIconPath: '/static/images/menu/icon1-1.png'
					},
					{
						pagePath: '/pages/customer/customer',
						text: '分享',
						iconPath: '/static/images/menu/icon2-1.png',
						selectedIconPath: '/static/images/menu/icon2-1.png'
					},
					{
						pagePath: '/pages/index/index',
						// text: '拨号',
						// iconPath: '/static/images/menu/icon3-1.png',
						// selectedIconPath: '/static/images/menu/icon3-1.png'
						text: '商城',
						iconPath: "/static/images/menu/icon8.png",
						selectedIconPath: "/static/images/menu/icon8.png"
					},
					{
						pagePath: '/pages/index/index',
						text: '导航',
						iconPath: '/static/images/menu/icon4-1.png',
						selectedIconPath: '/static/images/menu/icon4-1.png'
					},
					{
						pagePath: '/pages/index/webview',
						text: '官网',
						iconPath: '/static/images/menu/icon5-1.png',
						selectedIconPath: '/static/images/menu/icon5-1.png'						
					}
					// {
					// 	pagePath: '/pages/index/index',
					// 	text: '首页',
					// 	iconPath: '/static/images/menu/icon1.png',
					// 	selectedIconPath: '/static/images/menu/icon1-1.png'
					// },
					// {
					// 	pagePath: '/pages/customer/customer',
					// 	text: '客户',
					// 	iconPath: '/static/images/menu/icon2.png',
					// 	selectedIconPath: '/static/images/menu/icon2-1.png'
					// },
					// {
					// 	pagePath: '/pages/index/index',
					// 	text: '拓客商店',
					// 	iconPath: '/static/images/menu/icon3.png',
					// 	selectedIconPath: '/static/images/menu/icon3-1.png'
					// },
					// {
					// 	pagePath: '/pages/website/website',
					// 	text: '官网',
					// 	iconPath: '/static/images/menu/icon4.png',
					// 	selectedIconPath: '/static/images/menu/icon4-1.png'
					// },
					// {
					// 	pagePath: '/pages/my/index',
					// 	text: '我的',
					// 	iconPath: '/static/images/menu/icon5.png',
					// 	selectedIconPath: '/static/images/menu/icon5-1.png'
					// }
				]
			}
		}
	},
	data() {
		return {};
	},
	onShow() { },
	methods: {
		navigate(index, item) {
			console.log(index, 'index');
			// 禁止点击"拓客商店"
			if (item.text === '拓客商店') {
				uni.showToast({ title: '暂不支持跳转', icon: 'none' });
				return false
			}
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1];
			const targetPage = item.pagePath;
			if (item.text === '保存') {
				currentPage.$vm.saveToPhone && currentPage.$vm.saveToPhone()
				return false
			}			
			if (item.text === '分享') {
				if (!currentPage.$vm.info.userProfileDO.realName || !currentPage.$vm.info.companyProfileDO.companyName) {
					uni.showModal({
						title: '提示',
						content: '名片还未完善，无法分享'
					})
				}
				return false
			}
			if (item.text === '拨号') {
				// currentPage.$vm.saveToPhone && currentPage.$vm.callPhone()				
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，去登录？',
						success: (res) => {
							if (res.confirm) {
								this.$parent.login();
							}
						}
					});
					return false
				}
				this.SetNavigateToMiniProgram()
				return false
			}
			if (item.text === '导航') {
				currentPage.$vm.saveToPhone && currentPage.$vm.goAddress()
				return false
			}
			if (item.text === '官网') {
				const id = currentPage.$vm.info.companyProfileDO.id || uni.getStorageSync('userId')
				uni.navigateTo({
					url: '/pagesA/webview/webview?id=' + id
				})
				return false
			}
			// 如果点击的是当前页面，不执行跳转
			if (`/${currentPage.route}` === targetPage) {
				uni.showToast({ title: '已在当前页面', icon: 'none' });
				return false
			}			

			// 使用 redirectTo 进行跳转（适用于 tabBar 页面间跳转）
			uni.redirectTo({
				url: targetPage,
				fail: (err) => {
					console.log('redirectTo 失败:', err);
					// redirectTo 失败时尝试 navigateTo
					uni.navigateTo({
						url: targetPage,
						fail: (err2) => {
							console.log('navigateTo 失败:', err2);
							uni.showToast({ title: '页面跳转失败', icon: 'none' });
						}
					});
				}
			});
			//  this.$emit('tabClick', index)
		},
		SetNavigateToMiniProgram() {
			http({
				url: 'card/user-profile/get'
			}).then(rest => {
				if (rest.code === 0) {
					http({
						url: '/card/user-profile/thrid/login',
						method: 'POST',
						data: {
							mobile: rest.data.userProfileDO.phoneNumber,
							type: 3
						}
					}).then(res => {
						if (res.code === 0) {
							uni.navigateToMiniProgram({
								appId: 'wx11850f6ae3d9aa17',
								path: res.data,
								success() { },
								fail(err) { }
							});
						}
		
					})
				}
			})
		
		},
		login() {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (lres) => {
					console.log(lres, '请求微信登录返回的数据');
					//我们要根据上面获取的code码去作为请求参数发送给后端
					this.code = lres.code
					this.$emit('login', lres.code)
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.tabbar {
	// width: 750rpx;
	width: 100%;
	height: calc(140rpx + var(--safe-area-inset-bottom));
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px #EEEEEE;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	padding-top: 23rpx;
	box-sizing: border-box;

	// padding-bottom: var(--safe-area-inset-bottom);
	.tabbar-item {
		text-align: center;
		flex: 1;
		position: relative;

		.icon {
			width: 70rpx;
			height: 70rpx;
		}

		.text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			&.active {
				font-weight: bold;
			}
		}
		
		.store-text {
			// padding-top: 68rpx;
			padding-top: 80rpx;
		}

		button {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}
		
		.iimg {
			// width: 116rpx;
			// height: 116rpx;
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			// top: -60rpx;
			// left: calc(50% - 58rpx);
			top: -52rpx;
			left: calc(50% - 50rpx);
		}
	}
}
</style>